<template>
	<el-container>
		<el-aside width="200px">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="group" class="menu" node-key="id" :data="groupData" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-main>
			<div class="createTime">
                <div class="display">
                    <el-input v-model="form.name" placeholder="商品编号/名称/助记码/规格"></el-input>
                </div>
                <div class="display margin">
                    <el-input v-model="form.name" placeholder="供应商名称"></el-input>
                </div>
                <div class="display margin">
                    <el-select v-model="form.dept_id" clearable style="width: 100%" placeholder="品牌名称" filterable>
                        <el-option v-for="item in proName" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="display margin">
                    <el-select v-model="form.dept_id" clearable style="width: 100%" placeholder="状态">
                        <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="display margin">
                    <el-select v-model="form.dept_id" clearable style="width: 100%" placeholder="详情描述">
                        <el-option v-for="item in remarkArr" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="display">
                    <div class="btn search">查询</div>
                </div>
            </div>
            <!-- 按钮 -->
            <div class="button">
            <div class="left">
                <div class="btn" @click="add">新增</div>
                <div class="btn">修改</div>
                <div class="btn">复制</div>
                <div class="btn" style="background: #f8ac59;">删除</div>
                <div class="btn">禁用</div>
                <div class="btn">启用</div>
                <div class="btn" style="background: #ed5565;">分享</div>
                <div class="btn">导入</div>
                <div class="btn" style="background: #11d1b0">
                批量操作<el-icon size="14"><el-icon-CaretBottom /></el-icon>
                </div>
            </div>
            <div class="right">导出</div>
            </div>
            <el-card shadow="never">
                <scTable ref="table" :data="tableData" row-key="id" stripe hideDo border>
                    <el-table-column type="selection" width="30"></el-table-column>
                    <el-table-column label="编号" prop="id"  width="75" align="center" sortable></el-table-column>
                    <el-table-column label="名称" prop="name" width="80" align="center" sortable></el-table-column>
                    <el-table-column label="类别" prop="type" width="80" align="center"></el-table-column>
                    <el-table-column label="条形码" prop="qrcode" width="100" align="center"></el-table-column>
                    <el-table-column label="品牌" prop="brand" width="90" align="center"></el-table-column>
                    <el-table-column label="图片" prop="img" width="90" align="center"></el-table-column>
                    <el-table-column label="规格型号" prop="spec" width="90" align="center"></el-table-column>
                    <el-table-column label="供应商名称" prop="SUPPLIER" width="90" align="center"></el-table-column>
                    <el-table-column label="默认单位" prop="defUnit" width="90" align="center"></el-table-column>
                    <el-table-column label="采购价" prop="pushPrice"  width="90" align="center"></el-table-column>
                    <el-table-column label="成本价" prop="costPrice" width="90" align="center"></el-table-column>
                    <el-table-column label="批发价" prop="wholesalePrice" width="90" align="center"></el-table-column>
                    <el-table-column label="零售价" prop="retailPrice" width="90" align="center"></el-table-column>
                    <el-table-column label="批次号" prop="BatchNum" width="90" align="center">
                        <template #default="scope">
                            <div v-if="scope.row.BatchNum=='停用'" style="color:#ed5565">{{scope.row.BatchNum}}</div>
                            <div v-else style="color:#018052">{{scope.row.BatchNum}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="有效期" prop="period" width="90" align="center">
                        <template #default="scope">
                            <div v-if="scope.row.period=='停用'" style="color:#ed5565">{{scope.row.period}}</div>
                            <div v-else style="color:#018052">{{scope.row.period}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="可采购" prop="purchasable" width="90" align="center">
                        <template #default="scope">
                            <div v-if="scope.row.purchasable=='不可以'" style="color:#ed5565">{{scope.row.purchasable}}</div>
                            <div v-else style="color:#018052">{{scope.row.purchasable}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="status" width="90" align="center">
                        <template #default="scope">
                            <div v-if="scope.row.status=='未审核'" style="color:#ed5565">{{scope.row.status}}</div>
                            <div v-else style="color:#018052">{{scope.row.status}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark" width="90" align="center"></el-table-column>
                </scTable>
            </el-card>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		name: 'listTree',
		data() {
			return {
				groupFilterText: "",
                form: {
                    dept_id: "",
                    name:"",
                },
                status: [
                    {
                        value: "Option1",
                        label: "有效",
                    },
                    {
                        value: "Option2",
                        label: "无效",
                    },
                ],
                remarkArr: [
                    {
                        value: "Option1",
                        label: "有设置",
                    },
                    {
                        value: "Option2",
                        label: "无设置",
                    },
                ],
                proName: [
                    {
                        value: "Option1",
                        label: "品牌1",
                    },
                    {
                        value: "Option2",
                        label: "品牌2",
                    },
                     {
                        value: "Option3",
                        label: "品牌3",
                    },
                    {
                        value: "Option4",
                        label: "品牌4",
                    },
                     {
                        value: "Option5",
                        label: "品牌5",
                    },
                    {
                        value: "Option6",
                        label: "品牌6",
                    },
                ],
				groupData: [
					{
						id: "",
						label: "所有"
					},
					{
						id: "1",
						label: "商品类别",
						children: [
							{
								id: "11",
								label: "手机",
                                children: [
                                    {
                                        id: "111",
                                        label: "华为"
                                    },
                                    {
                                        id: "112",
                                        label: "OPPO"
                                    }
                                ]
							},
							{
								id: "12",
								label: "电脑"
							},
							{
								id: "13",
								label: "电子秤"
							}
						]
					},
					{
						id: "2",
						label: "公司",
						children: [
							{
								id: "21",
								label: "饮水机"
							},
							{
								id: "22",
								label: "电竞椅"
							}
						]
					}
				],
				search: {
					keyword: ""
				},
                tableData: [
                    {
                        id: 0,
                        date: "2016-05-03",
                        name: "名称1",
                        type:"电子产品",
                        qrcode:"QR19846584",
                        brand: "品牌1",
                        img:"1.png",
                        spec:"型号1",
                        SUPPLIER:"官方",
                        defUnit:"件",
                        pushPrice:111,
                        costPrice:100,
                        wholesalePrice:101,
                        retailPrice:102,
                        BatchNum:"停用",
                        period:"停用",
                        status: "未审核",
                        purchasable:"不可以",
                        remark:""
                    },
                    {
                        id: 1,
                        date: "2016-05-02",
                        name: "名称2",
                        type:"电子产品",
                        qrcode:"QR19846584",
                        brand: "品牌2",
                        img:"2.png",
                        spec:"型号2",
                        SUPPLIER:"官方",
                        defUnit:"个",
                        pushPrice:222,
                        costPrice:200,
                        wholesalePrice:201,
                        retailPrice:202,
                        BatchNum:"未停用",
                        period:"停用",
                        status: "未审核",
                        purchasable:"可以",
                        remark:""
                    },
                    {
                        id: 2,
                        date: "2016-05-04",
                        name: "名称3",
                        type:"电子产品",
                        qrcode:"QR19846584",
                        brand: "品牌3",
                        img:"3.png",
                        spec:"型号3",
                        SUPPLIER:"官方",
                        defUnit:"瓶",
                        pushPrice:333,
                        costPrice:300,
                        wholesalePrice:301,
                        retailPrice:302,
                        BatchNum:"停用",
                        period:"停用",
                        status: "未审核",
                        purchasable:"不可以",
                        remark:""
                    },
                    {
                        id: 3,
                        date: "2016-05-01",
                        name: "名称4",
                        type:"电子产品",
                        qrcode:"QR19846584",
                        brand: "品牌4",
                        img:"4.png",
                        spec:"型号4",
                        SUPPLIER:"官方",
                        defUnit:"箱",
                        pushPrice:444,
                        costPrice:400,
                        wholesalePrice:401,
                        retailPrice:402,
                        BatchNum:"未停用",
                        period:"停用",
                        status: "未审核",
                        purchasable:"可以",
                        remark:""
                    },
                ],
			}
		},
		watch: {
			groupFilterText(val) {
				this.$refs.group.filter(val);
			}
		},
		methods: {
			add(){
                this.$router.push({
                    path: '/produce/goodsInfo/addGoods',
		})
            },
		}
	}
</script>

<style lang="scss" scoped>
.createTime {
    display: flex;
    align-items: center;
    .display {
        display: flex;
        align-items: center;
        .text {
            margin-right: 10px;
        }
    .btn {
        padding: 5px;
        margin: 0 5px;
        border-radius: 8px;
        width: 80px;
        text-align: center;
        cursor: pointer;
        background: #11d1b0;
        color: #fff;
    }
  }
  .margin {
        margin-left: 30px;
        width: 12%;
  }
}
.button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    .left {
        display: flex;
        align-items: center;
        .btn {
            padding: 10px 20px;
            background: #23c6c8;
            color: #fff;
            margin: 0 5px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }
    .right {
        padding: 10px;
        background: #11d1b0;
        color: #fff;
        border-radius: 8px;
        width: 90px;
        text-align: center;
        cursor: pointer;
    }
}
.btnDisplay {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .btn {
        color: #2666f9;
        margin: 0 5px;
    }
}
</style>
